import React from 'react';
import style from './style.reviewList';
import {isEqual} from 'lodash';
import cx from 'classnames'
import moment from 'moment';
import {Button,Link} from '../../../../ui-components';
import util from '../../../../util';

class ReviewList extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'ReviewList';
    this.state = {
      index: 0,
      length: 0,
    }
  }
  componentDidMount() {
    const nextList = this.props.listParms.reviewTemplates;
    this.setInfo(nextList);
  }
  componentWillReceiveProps(nextProps) {
    const list = this.props.listParms.reviewTemplates;
    const nextList = nextProps.listParms.reviewTemplates;
    if(list.length !== nextList.length) {
      this.setInfo(nextList);
    }
  }
  setInfo = (nextList) => {
    const reList = nextList;
    const {
      itemId,
    } = this.props.routeParams;
    const length = reList.length - 3;
    const index = reList.findIndex(v => v.templateId == itemId);
    const pageIndex = ~index ? index > length ? length : index : 0;
    this.setState({
      index: pageIndex < 0 ? 0 : pageIndex,
      length: length < 0 ? 0 : length,
      list: reList,
    });
  }
  scrollPage = (flag) => {
    this.setState({
      index: this.state.index + flag,
    });
  }
  selectReview = (itemId) => {
    if(itemId === this.props.routeParams.itemId) return;
    this.context.router.push(`/review/index/${itemId}`);
  }
  onClick = () => {
    this.context.router.push(`/review/admin`);
  }
  render() {
    const {
      index,
      list = [],
      length,
    } = this.state;
    const {
      itemId
    } = this.props.routeParams;
    const {
      totalNumber,
    } = this.props.listParms;
    let currentIndex = list.findIndex(v => v.templateId == itemId);
    const {
      roleNameList = []
    } = this.props.profile || {};
    const flag = roleNameList.indexOf('HR');
    if(typeof totalNumber === 'undefined') return null;
    if(!list.length){
      return (
        <div className={style['review-void']}>
          <img src={`/${util.getImagePath()}/default/review-void.png`}/>
          <p>暂时没有任何反馈活动</p>
          {
            ~flag ? 
            (
              <Button className={style['button']} label={'前往管理活动'} onClick={this.onClick}/>
            )
            : null
          }
        </div>
      );
    } 
    return (
      <div className={style['area']}>
        {index === 0 ? null :<div className={style['arrow-left']} onClick={this.scrollPage.bind(this, -1)}></div>}
        
        <div className={style['box']}>
          <div className={style['box-scroll']} style={{
            marginLeft: `${index * -33.3}%`,
          }}>
            {
              list.map((v, i) => {
                return (
                  <div key={`item_${i}`} className={cx({
                    [style['item-layout']]: true,
                    [style['active']]: currentIndex === i,
                  })}>
                    <div className={style['item']} onClick={this.selectReview.bind(this, v.templateId)}>
                      <div className={style['item-title']}>{v.templateName}</div>
                      <p>对应工作阶段</p>
                      <p>{moment(+v.startTime).format('YYYY.MM.DD')} ~ {moment(+v.endTime).format('YYYY.MM.DD')}</p>
                    </div>
                  </div>
                );
              })
            }
          </div>
        </div>
        {index === length ? null : <div className={style['arrow-right']} onClick={this.scrollPage.bind(this, 1)}></div>}
      </div>
    );
  }
}

export default ReviewList;
